<template>
  <div class="accountingOverview">
    <div class="accountingOverview-left">
      <a-descriptions bordered size="small" :column="2">
        <a-descriptions-item v-for="(item,index) in formData" :key="index" :label="item.label">
          {{ item.content }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <div class="accountingOverview-right">
      <div id="chart"></div>
    </div>
  </div>
</template>

<script>
import {getAction} from '@api/manage'
import { splitByNum } from '@/utils/util'

export default {
  name: "AccountingOverview",
  description: "核算总览页面",
  data() {
    return {
      formData: [
        {label: "合同金额", field: "money", content: "",seriesData:""},
        {label: "回款金额", field: "actualMoney", content: "",seriesData:""},
        {label: "预计采购", field: "planPurchase", content: "",seriesData:""},
        {label: "实际采购", field: "actualPurchase", content: "",seriesData:"",},
        {label: "预计合同成本", field: "planContractCost", content: "",seriesData:"",},
        {label: "实际合同成本", field: "actualContractCost", content: "",seriesData:""},
        {label: "预计实施成本", field: "planProjectCost", content: "",seriesData:""},
        {label: "实际实施成本", field: "actualProjectCost", content: "",seriesData:""},
        {label: "发票金额", field: "invoicedAmount", content: "",seriesData:""},
        {label: "现金流", field: "moneyFlow", content: "",seriesData:""},
        {label: "预计利润", field: "planProfit", content: "",seriesData:""},
        {label: "实际利润", field: "actualProfit", content: "",seriesData:""},
      ],
      url: {
        check: "/pm/hfPmProjectCheck/check"
      }
    }
  },
  methods: {
    loadData(id) {
      getAction(this.url.check, {id}).then(res => {
        if (res.success) {
          for (let key in res.result) {
            this.formData.map(item => {
              if (key === item.field) {
                item.content = splitByNum(+res.result[key])
                item.seriesData = res.result[key]
              }
            })
          }
          this.renderChart()
        }
      })
    },
    renderChart() {
      let myCharts = this.$echarts.init(document.getElementById('chart'))
      let data = this.formData.map(item => item.label)
      let seriesData = this.formData.map(item => item.seriesData)
      let option = {
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: 45,
            fontSize: 14,
            color: '#000'
          },
          data,
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 14,
          },
          axisPointer: {type: 'shadow'}
        },
        grid: {
          top: 10,
          right: 0,
          left: 80
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: seriesData,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      myCharts.setOption(option)
      window.onresize = () => {
        myCharts.resize()
      }
    },
  }
}
</script>

<style scoped lang="less">
.accountingOverview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /deep/ &-left {
    width: 35%;
    height: 100%;

    .ant-descriptions-item-label {
      width: 140px !important;
    }
  }

  &-right {
    width: 65%;
    height: 100%;

    #chart {
      width: 100%;
      height: 230px
    }
  }
}
</style>